import { defineStore } from 'pinia'
import { theme } from 'ant-design-vue'
import variables from '@/sass/variables.module.scss'
import { isNullAndUnDef } from '@/utils/is'

export const useAppStore = defineStore(
    'app',
    () => {
        // #region 系统主题颜
        const themeName = ref('blue') // 主题名称
        const darkMode = ref('light') // 颜色模式
        const themeConfig = computed(() => {
            document.documentElement.setAttribute('data-theme', themeName.value)
            // 主题配置
            return {
                token: {
                    colorPrimary: variables[themeName.value] || '#3164f3',
                    colorSuccess: '#2ba471',
                    colorWarning: '#e37318',
                    colorError: '#d54941',
                    colorInfo: variables[themeName.value] || '#3164f3',
                    wireframe: true,
                    borderRadius: 6
                },
                algorithm: darkMode.value === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm
            }
        })
        const setThemeName = (value:string) => {
            themeName.value = value
        }
        const toggleDarkMode = () => {
            darkMode.value = darkMode.value === 'light' ? 'dark' : 'light'
        }
        // #endregion

        // #region 系统布局
        interface LayoutStateType {
            collapsed: boolean, // 侧边栏是折叠
        }
        const layoutState = reactive<LayoutStateType>({
            collapsed: false
        })

        const setLayoutState = (key:keyof typeof layoutState, value:any) => {
            if(isNullAndUnDef(key) && isNullAndUnDef(value)) return
            if(Reflect.has(layoutState, key)) {
                layoutState[key] = value
            }else {
                return null
            }
        }
        
        const switchCollapsed = () => {
            layoutState.collapsed = !layoutState.collapsed
        }


        // #endregion
        return { 
            // 系统主题色
            themeName,
            themeConfig,
            darkMode,
            setThemeName,
            toggleDarkMode,

            // 布局状态
            layoutState,
            setLayoutState,
            switchCollapsed
        }
    },
    {
        persist: true
    }
)